<template>
  <div>
    <div style="padding: 0 0 0 20px">
      <el-input
        style="width: 250px"
        suffix-icon="el-icon-position"
        placeholder="请输入交警编号搜索"
        v-model="policeId"
      ></el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        style="width: 250px"
        suffix-icon="el-icon-search"
        placeholder="请输入交警姓名搜索"
        v-model="userName"
      ></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"
        >搜索</el-button
      >
      <el-button style="margin-left: 5px" type="warning" @click="reset"
        >重置</el-button
      >
      <span>
        <Header />
      </span>
    </div>
    <div style="margin: 10px">
      <el-button type="primary" @click="handleAdd"
        >新增<i class="el-icon-circle-plus"></i
      ></el-button>
      <el-popconfirm
        style="margin-left: 5px"
        confirm-button-text="确定"
        cancel-button-text="再想想"
        icon="el-icon-info"
        icon-color="red"
        title="您确定删除吗？"
        @confirm="delBatch"
      >
        <el-button type="danger" slot="reference"
          >批量删除<i class="el-icon-remove"></i
        ></el-button>
      </el-popconfirm>
      <!-- <el-button type="primary"
              >导入<i class="el-icon-bottom"></i
            ></el-button>
            <el-button type="primary"
              >导出<i class="el-icon-top"></i
            ></el-button> -->
    </div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="30"></el-table-column>
      <el-table-column prop="id" label="ID " width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="policeId"
        label="交警编号"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="交警姓名"
        width="80"
        align="center"
      >
      </el-table-column>

      <el-table-column prop="userPassword" label="登录密码" align="center">
      </el-table-column>
      <el-table-column label="账号状态" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.lockStatus === 1 ? "正常" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="创建人"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column label="创建时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime.replace("T", " ") }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="middle"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            style="margin-left: 5px"
            confirm-button-text="确定"
            cancel-button-text="再想想"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              type="danger"
              size="middle"
              slot="reference"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="录入交警账号信息"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form label-width="80px" size="small">
        <el-form-item label="交警姓名">
          <el-input
            v-model="form.userName"
            placeholder="交警姓名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="交警编号">
          <el-input
            v-model="form.policeId"
            placeholder="默认账号为交警编号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.userPassword" autocomplete="off"></el-input>
        </el-form-item>
        <input type="hidden" v-model="hiddenValue" value="2" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
import Header from "@/components/Header.vue";
import Aside from "@/components/Aside.vue";
import { UserDelBatch, UserDelete, UserPage, UserSave, UserUpdate } from "@/api/api";

export default {
  //这是 ES6 的模块导出语法，表示这个对象是整个模块（通常是一个 .vue 文件）的默认导出。在 Vue.js 中，这通常是一个 Vue 组件的定义
  name: "User", //这是 Vue 组件的一个选项，用于在该组件内注册其他子组件。这样，你就可以在 HomeView 组件的模板中直接使用这些子组件了。
  components: {
    Aside, //引入子组件，可以在 HomeView 组件的模板中使用 <Aside /> 标签了
    Header, //可以在 HomeView 组件的模板中使用 <Header /> 标签了
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      userName: "",
      userPassword: "",
      policeId: "",
      hiddenValue: "",
      dialogFormVisible: false,
      form: {},
    };
  },
  created() {
    //请求分页查询数据
    this.load();
  },
  methods: {
    edit(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      /*传递过来当前是第几页*/
      console.log(`每页 ${val} 条`);
      this.pageSize = val; //获取当前每页显示条数
      this.load();
    },
    handleCurrentChange(val) {
      /*传递过来当前是第几页*/
      console.log(`当前页: ${val}`);
      this.pageNum = val; //获取当前第几页
      this.load();
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {}; //如果之前有填过值，可以置空
      this.hiddenValue = 1; //新增
    },
    handleEdit(row) {
      console.log(row);
      this.form = row; //把当前行的数据赋值给form
      this.dialogFormVisible = true;
      this.hiddenValue = 2; //更新
    },
    async handleDelete(id) {
      const res = await UserDelete(id);
      if (Number(resp.code) === 200) this.$message.success(res.msg);
      else this.$message.error(res.msg);
      this.load();
    },

    async saveUser() {
      if (this.hiddenValue === 1) {
        //新增
        const resp = await UserSave(this.form);
        if (Number(resp.code) === 200) this.$message.success(resp.msg);
        else this.$message.error(resp.msg);
        this.dialogFormVisible = false;
        this.load();
      } else {
        const resp = await UserUpdate(this.form);
        if (Number(resp.code) === 200) this.$message.success(resp.msg);
        else this.$message.error(resp.msg);
        this.dialogFormVisible = false;
        this.load();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    async delBatch() {
      let ids = this.multipleSelection.map((v) => v.id); //map这个方法可以实现将multipleSelection中的对象扁平化处理。
      const res = await UserDelBatch(ids);
      if (res) {
        this.$message.success("成功批量删除交警账号!");
        this.load();
      } else {
        this.$message.error("批量删除失败!");
      }
    },
    reset() {
      this.userName = "";
      this.policeId = "";
      this.total = "0";
      this.pageNum = "1";
      this.pageSize = "5";
      this.load();
    },

    //将请求数据封装为一个方法
    async load() {
      const res = await UserPage(this.pageNum, this.pageSize,this.userName,this.policeId);
      this.tableData = res.pagedata;
      this.total = res.total;
    },
  },
};
</script>